<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Advanced | Perfect Admin - Responsive HTML5 Admin Template</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="Perfect Admin - Responsive HTML5 Admin Template">
	<meta name="author" content="perfectusinc.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Google Web Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="http://cdn.bootstrapmb.com/bootstrap/4.1.0/css/bootstrap.min.css">
	<!-- Page CSS -->
	<link rel="stylesheet" href="../../assets/css/iCheck/skins/minimal/minimal.css">
	<link rel="stylesheet" href="../../assets/css/iCheck/custom.css">
	<link rel="stylesheet" href="../../assets/css/iCheck/skins/all.css">
	<link rel="stylesheet" href="../../assets/css/toggle/toggle.css">
	<link rel="stylesheet" href="../../assets/css/daterange/daterangepicker.css">
	<link rel="stylesheet" href="../../assets/css/rating/bars-1to10.css">
	<link rel="stylesheet" href="../../assets/css/rating/bars-movie.css">
	<link rel="stylesheet" href="../../assets/css/rating/bars-square.css">
	<link rel="stylesheet" href="../../assets/css/rating/bars-pill.css">
	<link rel="stylesheet" href="../../assets/css/rating/bars-reversed.css">
	<link rel="stylesheet" href="../../assets/css/rating/bars-horizontal.css">
	<link rel="stylesheet" href="../../assets/css/rating/fontawesome-stars.css">
	<link rel="stylesheet" href="../../assets/css/rating/css-stars.css">
	<link rel="stylesheet" href="../../assets/css/tags/jquery.tag-editor.css">
    <!-- Custom CSS Starts -->
    <link rel="stylesheet" href="../../assets/css/skin/all-skins.css">
    <link rel="stylesheet" href="../../assets/css/general/style.css">
    <link rel="stylesheet" href="../../assets/css/sidebar/side-nav.css">
	<link rel="stylesheet" href="../../assets/css/fonts/fonts-style.css">
	<link rel="stylesheet" href="../../assets/css/nanoscroller/nanoscroller.css">
</head>

<body class="sidebar-mini fixed skin-blue">
    <div class="wrapper">
		<!-- Header Section Starts -->
		<header class="main-header">
			<!-- Logo -->
			<a href="../../index2.html" class="logo">
				<!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"><b>P</b>AD</span>
				<!-- logo for regular state and mobile devices -->
				<span class="logo-lg"><b>Perfect </b>Admin</span>
			</a>
			<nav class="navbar navbar-static-top">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
					<span class="sr-only">Toggle navigation</span>
				</a>

				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- Messages Section Starts-->
						<li class="dropdown messages-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-envelope-o"></i>
								<span class="label label-success">4</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 4 messages</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<li>
											<!-- Message Area Starts -->
											<a href="#">
												<h4>
													Support Team
													<small><i class="fa fa-clock-o"></i> 5 mins</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<!-- Message Area Ends -->
										<li>
											<a href="#">
												<h4>
													Perfectus Design Team
													<small><i class="fa fa-clock-o"></i> 2 hours</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Developers
													<small><i class="fa fa-clock-o"></i> Today</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Sales Department
													<small><i class="fa fa-clock-o"></i> Yesterday</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Reviewers
													<small><i class="fa fa-clock-o"></i> 2 days</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
									</ul>
								</li>
								<li class="footer"><a href="#">See All Messages</a></li>
							</ul>
						</li>
						<!-- Messages Section Ends-->
						<!-- Notifications Section Starts -->
						<li class="dropdown notifications-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-bell-o"></i>
								<span class="label label-warning">10</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 10 notifications</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<li>
											<a href="#">
												<i class="fa fa-users text-aqua"></i> 5 new members joined today
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-users text-red"></i> 5 new members joined
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-shopping-cart text-green"></i> 25 sales made
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-user text-red"></i> You changed your username
											</a>
										</li>
									</ul>
								</li>
								<li class="footer"><a href="#">View all</a></li>
							</ul>
						</li>
						<!-- Notifications Section Ends -->
						<!-- Tasks Section Starts -->
						<li class="dropdown tasks-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-flag-o"></i>
								<span class="label label-danger">9</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 9 tasks</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<!-- Task Item Starts -->
										<li>
											<a href="#">
												<h3>
													Design some buttons
													<small class="pull-right">20%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">20% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Create a nice theme
													<small class="pull-right">40%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">40% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Some task I need to do
													<small class="pull-right">60%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">60% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Make beautiful transitions
													<small class="pull-right">80%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">80% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<!-- Task Item Ends -->
									</ul>
								</li>
								<li class="footer">
									<a href="#">View all tasks</a>
								</li>
							</ul>
						</li>
						<!-- Tasks Section Ends -->
						<!-- User Account Section Starts -->
						<li class="dropdown user user-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<img src="../../assets/images/user2-160x160.jpg" class="user-image" alt="User Image">
								<span class="d-none d-sm-block">Alexander Pierce</span>
							</a>
							<ul class="dropdown-menu">
								<!-- User Image Starts -->
								<li class="user-header">
									<img src="../../assets/images/user2-160x160.jpg" class="img-circle" alt="User Image">
									<p>
										Alexander Pierce - Web Developer
										<small>Member since Nov. 2012</small>
									</p>
								</li>
								<!-- User Image Starts -->
								<!-- Menu Body Starts -->
								<li class="user-body">
									<div class="row">
										<div class="col-4 text-center">
											<a href="#">Followers</a>
										</div>
										<div class="col-4 text-center">
											<a href="#">Sales</a>
										</div>
										<div class="col-4 text-center">
											<a href="#">Friends</a>
										</div>
									</div>
								</li>
								<!-- Menu Body Ends -->
								<!-- Menu Footer Starts -->
								<li class="user-footer">
									<div class="pull-left">
										<a href="#" class="btn btn-default btn-flat">Profile</a>
									</div>
									<div class="pull-right">
										<a href="#" class="btn btn-default btn-flat">Sign out</a>
									</div>
								</li>
								<!-- Menu Footer Ends -->
							</ul>
						</li>
						<!-- User Account Section Ends -->
					</ul>
				</div>
			</nav>
		</header>
		<!-- Header Section Ends -->
        
		<!-- Sidebar Section Starts -->
		<aside class="main-sidebar">
			<div class="nano">
				<div class="nano-content">
					<ul class="sidebar-menu" data-widget="tree">
						<li class="header">MAIN NAVIGATION</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-dashboard"></i> <span>Dashboard</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
								<li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-files-o"></i>
								<span>Layout Options</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
								<li><a href="../../pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
							</ul>
						</li>
						
						<li class="treeview">
							<a href="#">
								<i class="fa fa-pie-chart"></i>
								<span>Charts</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> 
										<span>ChartJS</span>
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="../../pages/charts/pie-chart.html"><i class="fa fa-circle-o"></i> Pie Chart</a></li>
										<li><a href="../../pages/charts/line-chart.html"><i class="fa fa-circle-o"></i> Line Chart</a></li>
										<li><a href="../../pages/charts/bar-chart.html"><i class="fa fa-circle-o"></i> Bar Chart</a></li>
									</ul>
								</li>
								<li><a href="../../pages/charts/sparkline.html"><i class="fa fa-circle-o"></i> Sparkline</a></li>
								<li><a href="../../pages/charts/flot-chart.html"><i class="fa fa-circle-o"></i> Flot Charts</a></li>
								
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-laptop"></i>
								<span>UI Elements</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								
								<li><a href="../../pages/elements/font-awesome-icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
								<li><a href="../../pages/elements/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
								<li><a href="../../pages/elements/hr-timeline.html"><i class="fa fa-circle-o"></i> Horizontal Timeline</a></li>
								<li><a href="../../pages/elements/timeline.html"><i class="fa fa-circle-o"></i> Vertical Timeline</a></li>
								<li><a href="../../pages/elements/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
								<li><a href="../../pages/elements/sweet-alert.html"><i class="fa fa-circle-o"></i> Sweet Alerts</a></li>
								<li><a href="../../pages/elements/accordion.html"><i class="fa fa-circle-o"></i> Accordions</a></li>
								<li><a href="../../pages/elements/progressbars.html"><i class="fa fa-circle-o"></i> Progress Bars</a></li>
								<li><a href="../../pages/elements/toastr.html"><i class="fa fa-circle-o"></i> Toastr</a></li>
								<li><a href="../../pages/elements/alerts.html"><i class="fa fa-circle-o"></i> Alert Box</a></li>
								<li><a href="../../pages/elements/tooltip.html"><i class="fa fa-circle-o"></i> Tool Tip</a></li>
								<li><a href="../../pages/elements/knob.html"><i class="fa fa-circle-o"></i> Knob</a></li>
								<li><a href="../../pages/elements/slider.html"><i class="fa fa-circle-o"></i> Carousel</a></li>
								<li><a href="../../pages/elements/pricing-table.html"><i class="fa fa-circle-o"></i> Pricing Tables</a></li>
								<li><a href="../../pages/elements/range-slider.html"><i class="fa fa-circle-o"></i> Range Slider</a></li>
								<li><a href="../../pages/elements/dropdowns.html"><i class="fa fa-circle-o"></i> Dropdowns</a></li>
								<li><a href="../../pages/elements/grid-list.html"><i class="fa fa-circle-o"></i> Grid/List</a></li>
								<li><a href="../../pages/elements/list-group.html"><i class="fa fa-circle-o"></i> List Group</a></li>
								<li><a href="../../pages/elements/cards.html"><i class="fa fa-circle-o"></i> Cards</a></li>
								<li><a href="../../pages/elements/tabs.html"><i class="fa fa-circle-o"></i> Tabs & Pills</a></li>
							</ul>
						</li>
						<li class="treeview active">
							<a href="#">
								<i class="fa fa-edit"></i> <span>Forms</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
								<li class="active"><a href="../../pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
								<li><a href="../../pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
								<li><a href="../../pages/forms/form-wizard.html"><i class="fa fa-circle-o"></i> Form Wizard</a></li><li><a href="../../pages/forms/file-upload.html"><i class="fa fa-circle-o"></i> File Upload</a></li>
								<li><a href="../../pages/forms/form-mask.html"><i class="fa fa-circle-o"></i> Formatter</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-table"></i> <span>Tables</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/tables/basic.html"><i class="fa fa-circle-o"></i> Basic tables</a></li>
								<li><a href="../../pages/tables/advanced.html"><i class="fa fa-circle-o"></i> Adavanced tables</a></li>
								<li><a href="../../pages/tables/nestable.html"><i class="fa fa-circle-o"></i> NesTable</a></li>
								<li><a href="../../pages/tables/jsgrid.html"><i class="fa fa-circle-o"></i> JS Grid</a></li>
							</ul>
						</li>
						<li>
							<a href="../../pages/calendar.html">
								<i class="fa fa-calendar"></i> <span>Calendar</span>
							</a>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-envelope"></i> <span>Mailbox</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/mailbox/inbox.html"><i class="fa fa-circle-o"></i> Inbox</a></li>
								<li><a href="../../pages/mailbox/compose.html"><i class="fa fa-circle-o"></i> Compose</a></li>
								<li><a href="../../pages/mailbox/read-mail.html"><i class="fa fa-circle-o"></i> Read</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-map-o"></i> <span>Maps</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/maps/google-map.html"><i class="fa fa-circle-o"></i> Google Map</a></li>
								<li><a href="../../pages/maps/jvector-map.html"><i class="fa fa-circle-o"></i> jVector Map</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-folder"></i> <span>Custom Pages</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/custompages/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
								<li><a href="../../pages/custompages/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> Login
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="../../pages/custompages/login1.html"><i class="fa fa-circle-o"></i> Login Page 1</a></li>
										<li><a href="../../pages/custompages/login2.html"><i class="fa fa-circle-o"></i> Login Page 2</a></li>
										<li><a href="../../pages/custompages/login3.html"><i class="fa fa-circle-o"></i> Login Page 3</a></li>
									</ul>
								</li>
								<li><a href="../../pages/custompages/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
								<li><a href="../../pages/custompages/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
								<li><a href="../../pages/custompages/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
								<li><a href="../../pages/custompages/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
								<li><a href="../../pages/custompages/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-share"></i> <span>Multilevel</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> Level One
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
										<li class="treeview">
											<a href="#"><i class="fa fa-circle-o"></i> Level Two
												<span class="pull-right-container">
													<i class="fa fa-angle-left pull-right"></i>
												</span>
											</a>
											<ul class="treeview-menu">
												<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
												<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
							</ul>
						</li>
						
						<li class="header">LABELS</li>
						<li><a href="#"><i class="fa fa-circle-o text-danger"></i> <span>Important</span></a></li>
						<li><a href="#"><i class="fa fa-circle-o text-warning"></i> <span>Warning</span></a></li>
						<li><a href="#"><i class="fa fa-circle-o text-info"></i> <span>Information</span></a></li>
					</ul>
				</div>
			</div>
		</aside> 
		<!-- Sidebar Section Ends -->
		
		<!-- Page Content Starts-->
		<div class="content-wrapper">
			<section class="content-header">
				<h1>
					Advanced
					<small>Forms</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="../../index.html"><i class="fa fa-dashboard"></i> Home</a></li>
					<li><a href="#">Forms</a></li>
					<li class="active">Advanced</li>
				</ol>
				<div class="heading-title">
					<p>For more information please refer the link <a target="_blank" href="http://icheck.fronteed.com/">iCheck Boxes</a>.</p>
				</div>
			</section>
			<div class="row">
				<!-- Minimal Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Minimal Skin</h6>
						<div class="skin skin-minimal">
							<div class="skin-section">
								<h4>Live</h4>
								<ul class="list">
									<li>
										<input tabindex="5" type="checkbox" id="minimal-checkbox-1">
										<label for="minimal-checkbox-1">Checkbox 1</label>
									</li>
									<li>
										<input tabindex="6" type="checkbox" id="minimal-checkbox-2" checked>
										<label for="minimal-checkbox-2">Checkbox 2</label>
									</li>
									<li>
										<input type="checkbox" id="minimal-checkbox-disabled" disabled>
										<label for="minimal-checkbox-disabled">Disabled</label>
									</li>
									<li>
										<input type="checkbox" id="minimal-checkbox-disabled-checked" checked disabled>
										<label for="minimal-checkbox-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
								<ul class="list">
									<li>
										<input tabindex="7" type="radio" id="minimal-radio-1" name="minimal-radio">
										<label for="minimal-radio-1">Radio button 1</label>
									</li>
									<li>
										<input tabindex="8" type="radio" id="minimal-radio-2" name="minimal-radio" checked>
										<label for="minimal-radio-2">Radio button 2</label>
									</li>
									<li>
										<input type="radio" id="minimal-radio-disabled" disabled>
										<label for="minimal-radio-disabled">Disabled</label>
									</li>
									<li>
										<input type="radio" id="minimal-radio-disabled-checked" checked disabled>
										<label for="minimal-radio-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
							</div>
							<div class="skin-section skin-states">
								<h4>States</h4>
								<ul class="list">
									<li>
										<div class="state icheckbox_minimal"></div>
										<div class="state iradio_minimal"></div>
										Normal
									</li>
									<li>
										<div class="state icheckbox_minimal hover"></div>
										<div class="state iradio_minimal hover"></div>
										Hover
									</li>
									<li>
										<div class="state icheckbox_minimal checked"></div>
										<div class="state iradio_minimal checked"></div>
										Checked
									</li>
									<li>
										<div class="state icheckbox_minimal disabled"></div>
										<div class="state iradio_minimal disabled"></div>
										Disabled
									</li>
									<li>
										<div class="state icheckbox_minimal checked disabled"></div>
										<div class="state iradio_minimal checked disabled"></div>
										Disabled &amp; checked
									</li>
								</ul>
							</div>
							<div class="colors clear">
								<strong>Color schemes</strong>
								<ul>
									<li class="active" title="Black"></li>
									<li class="red" title="Red"></li>
									<li class="green" title="Green"></li>
									<li class="blue" title="Blue"></li>
									<li class="aero" title="Aero"></li>
									<li class="grey" title="Grey"></li>
									<li class="orange" title="Orange"></li>
									<li class="yellow" title="Yellow"></li>
									<li class="pink" title="Pink"></li>
									<li class="purple" title="Purple"></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- Minimal Section Ends -->
				<!-- Square Skin Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Square Skin</h6>
						<div class="skin skin-square">
							<div class="skin-section">
								<h4>Live</h4>
								<ul class="list">
									<li>
										<input tabindex="9" type="checkbox" id="square-checkbox-1">
										<label for="square-checkbox-1">Checkbox 1</label>
									</li>
									<li>
										<input tabindex="10" type="checkbox" id="square-checkbox-2" checked>
										<label for="square-checkbox-2">Checkbox 2</label>
									</li>
									<li>
										<input type="checkbox" id="square-checkbox-disabled" disabled>
										<label for="square-checkbox-disabled">Disabled</label>
									</li>
									<li>
										<input type="checkbox" id="square-checkbox-disabled-checked" checked disabled>
										<label for="square-checkbox-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
								<ul class="list">
									<li>
										<input tabindex="11" type="radio" id="square-radio-1" name="square-radio">
										<label for="square-radio-1">Radio button 1</label>
									</li>
									<li>
										<input tabindex="12" type="radio" id="square-radio-2" name="square-radio" checked>
										<label for="square-radio-2">Radio button 2</label>
									</li>
									<li>
										<input type="radio" id="square-radio-disabled" disabled>
										<label for="square-radio-disabled">Disabled</label>
									</li>
									<li>
										<input type="radio" id="square-radio-disabled-checked" checked disabled>
										<label for="square-radio-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
							</div>
							<div class="skin-section skin-states">
								<h4>States</h4>
								<ul class="list">
									<li>
										<div class="state icheckbox_square-green"></div>
										<div class="state iradio_square-green"></div>
										Normal
									</li>
									<li>
										<div class="state icheckbox_square-green hover"></div>
										<div class="state iradio_square-green hover"></div>
										Hover
									</li>
									<li>
										<div class="state icheckbox_square-green checked"></div>
										<div class="state iradio_square-green checked"></div>
										Checked
									</li>
									<li>
										<div class="state icheckbox_square-green disabled"></div>
										<div class="state iradio_square-green disabled"></div>
										Disabled
									</li>
									<li>
										<div class="state icheckbox_square-green checked disabled"></div>
										<div class="state iradio_square-green checked disabled"></div>
										Disabled &amp; checked
									</li>
								</ul>
							</div>
							<div class="colors clear">
								<strong>Color schemes</strong>
								<ul>
									<li title="Black"></li>
									<li class="red" title="Red"></li>
									<li class="green active" title="Green"></li>
									<li class="blue" title="Blue"></li>
									<li class="aero" title="Aero"></li>
									<li class="grey" title="Grey"></li>
									<li class="orange" title="Orange"></li>
									<li class="yellow" title="Yellow"></li>
									<li class="pink" title="Pink"></li>
									<li class="purple" title="Purple"></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- Square Skin Section Ends -->
			</div>
			<div class="row">
				<!-- Flat Skin Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Flat Skin</h6>
						<div class="skin skin-flat">
							<div class="skin-section">
								<h4>Live</h4>
								<ul class="list">
									<li>
										<input tabindex="5" type="checkbox" id="flat-checkbox-1">
										<label for="flat-checkbox-1">Checkbox 1</label>
									</li>
									<li>
										<input tabindex="6" type="checkbox" id="flat-checkbox-2" checked>
										<label for="flat-checkbox-2">Checkbox 2</label>
									</li>
									<li>
										<input type="checkbox" id="flat-checkbox-disabled" disabled>
										<label for="flat-checkbox-disabled">Disabled</label>
									</li>
									<li>
										<input type="checkbox" id="flat-checkbox-disabled-checked" checked disabled>
										<label for="flat-checkbox-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
								<ul class="list">
									<li>
										<input tabindex="7" type="radio" id="flat-radio-1" name="flat-radio">
										<label for="flat-radio-1">Radio button 1</label>
									</li>
									<li>
										<input tabindex="8" type="radio" id="flat-radio-2" name="flat-radio" checked>
										<label for="flat-radio-2">Radio button 2</label>
									</li>
									<li>
										<input type="radio" id="flat-radio-disabled" disabled>
										<label for="flat-radio-disabled">Disabled</label>
									</li>
									<li>
										<input type="radio" id="flat-radio-disabled-checked" checked disabled>
										<label for="flat-radio-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
							</div>
							<div class="skin-section skin-states">
								<h4>States</h4>
								<ul class="list">
									<li>
										<div class="state icheckbox_flat-red"></div>
										<div class="state iradio_flat-red"></div>
										Normal
									</li>
									<li>
										<div class="state icheckbox_flat-red checked"></div>
										<div class="state iradio_flat-red checked"></div>
										Checked
									</li>
									<li>
										<div class="state icheckbox_flat-red disabled"></div>
										<div class="state iradio_flat-red disabled"></div>
										Disabled
									</li>
									<li>
										<div class="state icheckbox_flat-red checked disabled"></div>
										<div class="state iradio_flat-red checked disabled"></div>
										Disabled &amp; checked
									</li>
								</ul>
							</div>
							<div class="colors clear">
								<strong>Color schemes</strong>
								<ul>
									<li title="Black"></li>
									<li class="red active" title="Red"></li>
									<li class="green" title="Green"></li>
									<li class="blue" title="Blue"></li>
									<li class="aero" title="Aero"></li>
									<li class="grey" title="Grey"></li>
									<li class="orange" title="Orange"></li>
									<li class="yellow" title="Yellow"></li>
									<li class="pink" title="Pink"></li>
									<li class="purple" title="Purple"></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- Square Skin Section Ends -->
				<!-- Line Skin Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Line Skin</h6>
						<div class="skin skin-line">
							<div class="skin-section">
								<h4>Live</h4>
								<ul class="list">
									<li>
										<input tabindex="9" type="checkbox" id="line-checkbox-1">
										<label for="line-checkbox-1">Checkbox 1</label>
									</li>
									<li>
										<input tabindex="10" type="checkbox" id="line-checkbox-2" checked>
										<label for="line-checkbox-2">Checkbox 2</label>
									</li>
									<li>
										<input type="checkbox" id="line-checkbox-disabled" disabled>
										<label for="line-checkbox-disabled">Disabled</label>
									</li>
									<li>
										<input type="checkbox" id="line-checkbox-disabled-checked" checked disabled>
										<label for="line-checkbox-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
								<ul class="list">
									<li>
										<input tabindex="11" type="radio" id="line-radio-1" name="line-radio">
										<label for="line-radio-1">Radio button 1</label>
									</li>
									<li>
										<input tabindex="12" type="radio" id="line-radio-2" name="line-radio" checked>
										<label for="line-radio-2">Radio button 2</label>
									</li>
									<li>
										<input type="radio" id="line-radio-disabled" disabled>
										<label for="line-radio-disabled">Disabled</label>
									</li>
									<li>
										<input type="radio" id="line-radio-disabled-checked" checked disabled>
										<label for="line-radio-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
							</div>
							<div class="skin-section skin-states">
								<h4>States</h4>
								<ul class="list">
									<li>
										<div class="state icheckbox_line-blue">
											<div class="icheck_line-icon"></div>
											Normal
										</div>
									</li>
									<li>
										<div class="state icheckbox_line-blue hover">
											<div class="icheck_line-icon"></div>
											Hover
										</div>
									</li>
									<li>
										<div class="state icheckbox_line-blue checked">
											<div class="icheck_line-icon"></div>
											Checked
										</div>
									</li>
									<li>
										<div class="state icheckbox_line-blue disabled">
											<div class="icheck_line-icon"></div>
											Disabled
										</div>
									</li>
									<li>
										<div class="state icheckbox_line-blue checked disabled">
											<div class="icheck_line-icon"></div>
											Disabled &amp; checked
										</div>
									</li>
								</ul>
							</div>
							<div class="colors clear">
								<strong>Color schemes</strong>
								<ul>
									<li title="Black"></li>
									<li class="red" title="Red"></li>
									<li class="green" title="Green"></li>
									<li class="blue active" title="Blue"></li>
									<li class="aero" title="Aero"></li>
									<li class="grey" title="Grey"></li>
									<li class="orange" title="Orange"></li>
									<li class="yellow" title="Yellow"></li>
									<li class="pink" title="Pink"></li>
									<li class="purple" title="Purple"></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- Line Skin Section Ends -->
			</div>
			<div class="row">
				<!-- Polaris Skin Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Polaris Skin</h6>
						<div class="skin skin-polaris">
							<div class="skin-section">
								<h4>Live</h4>
								<ul class="list">
									<li>
										<input tabindex="5" type="checkbox" id="polaris-checkbox-1">
										<label for="polaris-checkbox-1">Checkbox 1</label>
									</li>
									<li>
										<input tabindex="6" type="checkbox" id="polaris-checkbox-2" checked>
										<label for="polaris-checkbox-2">Checkbox 2</label>
									</li>
									<li>
										<input type="checkbox" id="polaris-checkbox-disabled" disabled>
										<label for="polaris-checkbox-disabled">Disabled</label>
									</li>
									<li>
										<input type="checkbox" id="polaris-checkbox-disabled-checked" checked disabled>
										<label for="polaris-checkbox-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
								<ul class="list">
									<li>
										<input tabindex="7" type="radio" id="polaris-radio-1" name="polaris-radio">
										<label for="polaris-radio-1">Radio button 1</label>
									</li>
									<li>
										<input tabindex="8" type="radio" id="polaris-radio-2" name="polaris-radio" checked>
										<label for="polaris-radio-2">Radio button 2</label>
									</li>
									<li>
										<input type="radio" id="polaris-radio-disabled" disabled>
										<label for="polaris-radio-disabled">Disabled</label>
									</li>
									<li>
										<input type="radio" id="polaris-radio-disabled-checked" checked disabled>
										<label for="polaris-radio-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
							</div>
							<div class="skin-section skin-states">
								<h4>States</h4>
								<ul class="list">
									<li>
										<div class="state icheckbox_polaris"></div>
										<div class="state iradio_polaris"></div>
										Normal
									</li>
									<li>
										<div class="state icheckbox_polaris hover"></div>
										<div class="state iradio_polaris hover"></div>
										Hover
									</li>
									<li>
										<div class="state icheckbox_polaris checked"></div>
										<div class="state iradio_polaris checked"></div>
										Checked
									</li>
									<li>
										<div class="state icheckbox_polaris disabled"></div>
										<div class="state iradio_polaris disabled"></div>
										Disabled
									</li>
									<li>
										<div class="state icheckbox_polaris checked disabled"></div>
										<div class="state iradio_polaris checked disabled"></div>
										Disabled &amp; checked
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- Polaris Skin Section Ends -->
				<!-- Futurico Skin Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Futurico Skin</h6>
						<div class="skin skin-futurico">
							<div class="skin-section">
								<h4>Live</h4>
								<ul class="list">
									<li>
										<input tabindex="9" type="checkbox" id="futurico-checkbox-1">
										<label for="futurico-checkbox-1">Checkbox 1</label>
									</li>
									<li>
										<input tabindex="10" type="checkbox" id="futurico-checkbox-2" checked>
										<label for="futurico-checkbox-2">Checkbox 2</label>
									</li>
									<li>
										<input type="checkbox" id="futurico-checkbox-disabled" disabled>
										<label for="futurico-checkbox-disabled">Disabled</label>
									</li>
									<li>
										<input type="checkbox" id="futurico-checkbox-disabled-checked" checked disabled>
										<label for="futurico-checkbox-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
								<ul class="list">
									<li>
										<input tabindex="11" type="radio" id="futurico-radio-1" name="futurico-radio">
										<label for="futurico-radio-1">Radio button 1</label>
									</li>
									<li>
										<input tabindex="12" type="radio" id="futurico-radio-2" name="futurico-radio" checked>
										<label for="futurico-radio-2">Radio button 2</label>
									</li>
									<li>
										<input type="radio" id="futurico-radio-disabled" disabled>
										<label for="futurico-radio-disabled">Disabled</label>
									</li>
									<li>
										<input type="radio" id="futurico-radio-disabled-checked" checked disabled>
										<label for="futurico-radio-disabled-checked">Disabled &amp; checked</label>
									</li>
								</ul>
							</div>
							<div class="skin-section skin-states">
								<h4>States</h4>
								<ul class="list">
									<li>
										<div class="state icheckbox_futurico"></div>
										<div class="state iradio_futurico"></div>
										Normal
									</li>
									<li>
										<div class="state icheckbox_futurico checked"></div>
										<div class="state iradio_futurico checked"></div>
										Checked
									</li>
									<li>
										<div class="state icheckbox_futurico disabled"></div>
										<div class="state iradio_futurico disabled"></div>
										Disabled
									</li>
									<li>
										<div class="state icheckbox_futurico checked disabled"></div>
										<div class="state iradio_futurico checked disabled"></div>
										Disabled &amp; checked
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- Futurico Skin Section Ends -->
			</div>
			<section class="content-header">
				<h1>
					Date Picker
				</h1>
				<div class="heading-title">
					<p>For more information please refer the link <a target="_blank" href="http://www.daterangepicker.com/">Date Picker</a>.</p>
				</div>
			</section>
			<div class="row">
				<!-- Date Range Picker Section Starts -->
				<div class="col-xl-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Date Range Picker</h6>
						<div class="row">
							<div class="col-xl-6 col-lg-12">
								<label class="control-label">Date Picker With Time</label>
								<div class="input-calendar input-group">
									<i class="fa fa-calendar"></i>
									<input type="text" name="datetimes" />
								</div>
							</div>
							<div class="col-xl-6 col-lg-12">
								<label class="control-label">Date Picker Without Time</label>
								<div class="input-calendar input-group">
									<i class="fa fa-calendar"></i>
									<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
								</div>
							</div>	
						</div>

					</div>
				</div>
				<!-- Date Range Picker Section Ends -->
				<!-- Single Date Section Starts -->
				<div class="col-xl-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Single Date</h6>
						<div class="row">
							<div class="col-xl-6 col-lg-12">
								<label class="control-label">Predefined Date</label>
								<div class="input-calendar input-group">
									<i class="fa fa-calendar"></i>
									<input type="text" name="birthday" value="10/24/1984" />
								</div>
							</div>
							<div class="col-xl-6 col-lg-12">
								<label class="control-label">Initially Empty</label>
								<div class="input-calendar input-group">
									<i class="fa fa-calendar"></i>
									<input type="text" name="datefilter" value="" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Single Date Section Ends -->
			</div>
			<section class="content-header">
				<h1>
					Toggle Switches
				</h1>
				<div class="heading-title">
					<p>For more information please refer the link <a target="_blank" href="http://www.bootstraptoggle.com/">Toggle Switches</a>.</p>
				</div>
			</section>
			<div class="row">
				<!-- Toggle Mix Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Toggle Mix</h6>
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="default" data-offstyle="primary">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger" data-offstyle="success">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="info" data-offstyle="warning">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary" data-offstyle="default">
					</div>
				</div>
				<!-- Toggle Mix Section Ends -->
				<!-- Toggle Colors Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Toggle Colors</h6>
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="info">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger">
						<input type="checkbox" checked data-toggle="toggle" data-onstyle="default">
					</div>
				</div>
				<!-- Toggle Colors Section Ends -->
			</div>
			<div class="row">
				<!-- Toggle Custom Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg height-165">
						<h6 class="title-inner text-uppercase">Toggle Custom</h6>
						<input type="checkbox" checked data-toggle="toggle" data-style="ios">
						<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info">
						<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
						<input type="checkbox" checked data-toggle="toggle" data-on="<i class='fa fa-play'></i> Play" data-off="<i class='fa fa-pause'></i> Pause">
					</div>
				</div>
				<!-- Toggle Custom Section Ends -->
				<!-- Toggle Sizes Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg height-165">
						<h6 class="title-inner text-uppercase">Toggle Sizes</h6>
						<input type="checkbox" checked data-toggle="toggle" data-size="large">
						<input type="checkbox" checked data-toggle="toggle" data-size="normal">
						<input type="checkbox" checked data-toggle="toggle" data-size="mini">
						<input type="checkbox" checked data-toggle="toggle" data-size="small">
					</div>
				</div>
				<!-- Toggle Sizes Section Ends -->
			</div>
			<div class="row">
				<!-- Toggle Custom Sizes Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Toggle Custom Sizes</h6>
						<input type="checkbox" checked data-toggle="toggle" data-width="100" data-height="75">
						<input type="checkbox" checked data-toggle="toggle" data-height="75">
						<input type="checkbox" checked data-toggle="toggle" data-width="100">
					</div>
				</div>
				<!-- Toggle Custom Sizes Section Ends -->
				<!-- Toggle Animation Speed Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Toggle Animation Speed</h6>
						<input type="checkbox" checked data-toggle="toggle" data-style="slow">
						<input type="checkbox" checked data-toggle="toggle" data-class="fast">
						<input type="checkbox" checked data-toggle="toggle" data-style="quick">
					</div>
				</div>
				<!-- Toggle Animation Speed Section Ends -->
			</div>
			<section class="content-header">
				<h1>
					jQuery Bar Ratings
				</h1>
				<div class="heading-title">
					<p>For more information please refer the link <a target="_blank" href="http://antenna.io/demo/jquery-bar-rating/examples/">jQuery Bar Ratings</a>.</p>
				</div>
			</section>
			<div class="row">
				<!-- 1/10 Rating Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">1/10 Rating</h6>
						<select id="example-1to10" name="rating" autocomplete="off">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7" selected="selected">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
						</select>
					</div>
				</div>
				<!-- 1/10 Rating Section Ends -->
				<!-- Movie Rating Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Movie Rating</h6>
						<select id="example-movie" name="rating" autocomplete="off">
							<option value="Bad">Bad</option>
							<option value="Mediocre">Mediocre</option>
							<option value="Good" selected="selected">Good</option>
							<option value="Awesome">Awesome</option>
						</select>
					</div>
				</div>
				<!-- Movie Rating Section Ends -->
			</div>
			<div class="row">
				<!-- Square Rating Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Square Rating</h6>
						<select id="example-square" name="rating" autocomplete="off">
							<option value=""></option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</div>
				</div>
				<!-- Square Rating Section Ends -->
				<!-- Pill Rating Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Pill Rating</h6>
						<select id="example-pill" name="rating" autocomplete="off">
							<option value="A">A</option>
							<option value="B">B</option>
							<option value="C">C</option>
							<option value="D">D</option>
							<option value="E">E</option>
							<option value="F">F</option>
						</select>
					</div>
				</div>
				<!-- Pill Rating Section Ends -->
			</div>
			<div class="row">
				<!-- Reversed Rating Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Reversed Rating</h6>
						<select id="example-reversed" name="rating" autocomplete="off">
							<option value="Strongly Agree">Strongly Agree</option>
							<option value="Agree">Agree</option>
							<option value="Neither Agree or Disagree" selected="selected">Neither Agree or Disagree</option>
							<option value="Disagree">Disagree</option>
							<option value="Strongly Disagree">Strongly Disagree</option>
						</select>
					</div>
				</div>
				<!-- Reversed Rating Section Ends -->
				<!-- Horizontal Rating Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Horizontal Rating</h6>
						<select id="example-horizontal" name="rating" autocomplete="off">
							<option value="10">10</option>
							<option value="9">9</option>
							<option value="8">8</option>
							<option value="7">7</option>
							<option value="6">6</option>
							<option value="5">5</option>
							<option value="4">4</option>
							<option value="3">3</option>
							<option value="2">2</option>
							<option value="1" selected="selected">1</option>
						</select>
					</div>
				</div>
				<!-- Horizontal Rating Section Ends -->
			</div>
			<div class="row">
				<!-- Font Awesome Stars Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Font Awesome Stars</h6>
						<select id="example-fontawesome" name="rating" autocomplete="off">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</div>
				</div>
				<!-- Font Awesome Stars Section Ends -->
				<!-- CSS Stars Section Starts -->
				<div class="col-lg-6 col-sm-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">CSS Stars</h6>
						<select id="example-css" name="rating" autocomplete="off">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</div>
				</div>
				<!-- CSS Stars Section Ends -->
			</div>
			<!-- Tags Section Starts -->
			<section class="content-header">
				<h1>
					jQuery Tags
				</h1>
				<div class="heading-title">
					<p>For more information please refer the link <a target="_blank" href="https://goodies.pixabay.com/jquery/tag-editor/demo.html">jQuery Tags</a>.</p>
				</div>
			</section>
			<div class="row">
				<div class="col-lg-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Tags</h6>
						<textarea id="demo1"></textarea>
					</div>
				</div>
			</div>
			<!-- Tags Section Ends -->
			<!-- Bootstrap Max Length Section Starts -->
			<section class="content-header">
				<h1>
					Bootstrap Max Length
				</h1>
				<div class="heading-title">
					<p>For more information please refer the link <a target="_blank" href="http://mimo84.github.io/bootstrap-maxlength/">Bootstrap Max Length</a>.</p>
				</div>
			</section>
			<div class="row">
				<div class="col-xl-12">
					<div class="cardbg">
						<h6 class="title-inner text-uppercase">Bootstrap Max Length</h6>
						<div class="row">
							<div class="col-lg-4 col-sm-12">
								<label class="control-label">Default Usage</label>
								<input type="text" class="form-control" maxlength="10">
							</div>
							<div class="col-lg-4 col-sm-12">
								<label class="control-label">Do you want the badge to show up when there are 20 chars or less? Use the threshold option:</label>
								<input type="text" class="form-control threshold" maxlength="20">
							</div>
							<div class="col-lg-4 col-sm-12">
								<label class="control-label">Bootstrap maxlength supports textarea as well as inputs. Even on old IE.</label>
								<textarea class="form-control" id="max_textarea" name="xyz" maxlength="255"></textarea>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Bootstrap Max Length Section Ends -->
		</div>
		<!-- Page Content Ends-->
		
		<!-- Back to Top Starts -->
		<a href="javascript:" id="return-to-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
		<!-- Back to Top Ends -->
		
		<!-- Footer Section Starts -->
		<footer class="main-footer">
			<div class="pull-right hidden-xs">
			  Version 1.0.0
			</div>
			<p class="mb-0">Copyright © 2019 <a target="_blank" href="http://www.bootstrapmb.com/">Perfectus Inc</a>. All rights
			reserved.</p>
		</footer>
		<!-- Footer Section Ends -->
		
	</div>
	<!-- jQuery CDN - Slim version (=without AJAX) -->
	<script src="../../assets/js/jquery/slim.min.js"></script>
	<!-- Popper.JS -->
	<script src="../../assets/js/jquery/popper.min.js"></script>
	<!-- Bootstrap JS -->
	<script src="http://cdn.bootstrapmb.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	<script src="../../assets/js/jquery/jquery.min.js"></script>
	<!-- Page JS -->
	<script src="../../assets/js/iCheck/icheck.js"></script>
	<script src="../../assets/js/iCheck/icheck_custom.js"></script>
	<script src="../../assets/js/toggle/toggle.js"></script>
	<script src="../../assets/js/calendar/moment.js"></script>
	<script src="../../assets/js/daterange/daterangepicker.js"></script>
	<script src="../../assets/js/daterange/daterangepicker_custom.js"></script>
	<script src="../../assets/js/iCheck/custom.min.js"></script>
	<script>window.jQuery || document.write('<script src="../../assets/js/rating/vendor/jquery-1.11.2.min.js"><\/script>')</script>
	<script src="../../assets/js/rating/jquery.barrating.js"></script>
	<script src="../../assets/js/rating/examples.js"></script>
	<script src="../../assets/js/jqueryui/jquery-ui.min.js"></script>
	<script src="../../assets/js/tags/jquery.caret.min.js"></script>
	<script src="../../assets/js/tags/jquery.tag-editor.js"></script>
	<script src="../../assets/js/tags/tag_custom.js"></script>
	<script src="../../assets/js/forms/bootstrap-maxlength.js"></script>
	<script src="../../assets/js/forms/maxlength_custom.js"></script>
	<!-- Theme JS -->
	<script src="../../assets/js/nanoscroller/nanoscroller.js"></script>
	<script src="../../assets/js/custom/theme.js"></script>
</body>

</html>
